import React, { Component } from 'react';
import style from './app.module.css';

export default class App extends Component {

    
    componentDidMount() {
        //添加的原生事件
        this.refs.red.addEventListener('click',function(e){
            console.log('原生-red');
            // e.stopPropagation(); //阻止事件冒泡
        })
        this.refs.blue.addEventListener('click',function(){
            console.log('原生-blue')
        })
        this.refs.green.addEventListener('click',function(){
            console.log('原生-green')
        })
    }
    
    render() {
        return (
            <div>
                <div className={style.red} ref="red"  onClickCapture={this.red}>
                    <div className={style.blue} ref="blue" onClickCapture={this.blue}>
                        <div className={style.green} ref="green" onClickCapture={this.green}></div>
                    </div>
                </div>
            </div>
        )
    }

    red = () => {
        console.log("react-red")
    }
    blue = () => {
        console.log("react-blue")
    }
    green = () => {
        console.log("react-green")
    }
}
